<template>
    <div class="goods-list">
        <!--<h3>商品列表</h3>-->
        <div class="goods-item" @click="goDetail(1)">
            <img src="http://www.sinaimg.cn/dy/slidenews/40_img/2015_45/29253_4592670_709379.jpg" alt="">
            <h1 class="title">小米手机</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥2000</span>
                    <span class="old">￥1999</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩余60件</span>
                </p>
            </div>
        </div>
        <router-link class="goods-item" to="/home/goodinfo/2 ">
            <img src="http://img.ssfun.com/allimg/160309/1-1603091434330-L.jpg" alt="">
            <h1 class="title">大米手机</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥2000</span>
                    <span class="old">￥1999</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩余60件</span>
                </p>
            </div>
        </router-link>
        <div class="goods-item">
            <img src="http://img.ssfun.com/allimg/160309/1-1603091434330-L.jpg" alt="">
            <h1 class="title">大米手机</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥2000</span>
                    <span class="old">￥1999</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩余60件</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "GoodsList",
        data() {
            return {
                id: this.$route.paramsid
            }
        },
        methods: {
            goDetail(id) {
                // 使用js的形式进行路由导航

                // 注意： 区分 this.$route  和 this.$router 这两个对象，
                // 其中： this.$route是路由【参数对象】，所有路由中的参数， params, query 都属于它
                // 其中： this.$router 是一个路由【导航对象】，用它可以方便的使用 js 代码，实现路由的前进、后退、跳转到新的 URL 地址

                // 1. 最简单：
                // this.$router.push('/home/goodsinfo/' + id);
                // 2. 传递对象：
                // this.$router.push({path: '/home/goodinfo/' + id});
                // 3. 传递命名的路由：
                this.$router.push({name: 'goodsinfo', params: {id: id}});


            }
        }
    }
</script>

<style lang="scss" scoped>
    .goods-list {
        display: flex;
        flex-wrap: wrap;
        padding: 7px;
        justify-content: space-between;
    }

    .goods-item {
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 3px 0;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 230px;
        img {
            width: 100%;
        }
        .title {
            font-size: 14px;
        }
        .info {
            background-color: #ccc;
            p {
                margin: 0;
                padding: 5px;
            }
            .price {
                .now {
                    color: red;
                    font-weight: bold;
                    font-size: 16px;
                }
                .old {
                    text-decoration: line-through;
                    font-size: 12px;
                    margin-left: 10px;
                }
            }
            .sell {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
            }
        }
    }
</style>